<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="css/mui.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4718687_km8s2y0m68m.css" />
    <script src="js/weixin_utils.js"></script>
    <script src="js/mui.js"></script>
    <script type="text/javascript">
        mui.init();
		
        mui.plusReady(function() {
			var user = util.getUser();
			document.getElementById('username').innerText = user.nickname;
			document.getElementById('account').innerText = user.account;
			uploadAvatar();
			
            document.getElementById("go_my_info").addEventListener("tap", function() {
                // 跳转个人中心
                plus.webview.open("my_info.html", "my_info.html");
            });
        });
		
		function uploadAvatar(){
			var user = util.getUser();
			var update = util.ajax({
				url: api.userInfo(user.id),
				success: function(data) {
					if (data.code == 200 && data.httpCode == 200) {
						var user = data.data;
						if (user.avatar != null) {
							document.getElementById("avatar").src = user.avatar;
						}
						document.getElementById('username').innerText = user.nickname;
						document.getElementById('account').innerText = user.account;
					}
				}
			});
		}
    </script>
</head>

<body>

    <ul class="mui-table-view" style="height: 170px; display: flex; align-items: center;">
        <li class="mui-table-view-cell mui-media" style="width: 100%; margin-top: 25px;"  id="go_my_info">
            <div style="display: flex;">
                <a href="javascript:;">
                    <img id="avatar" class="mui-pull-left profile-pic" src="">
                    <div class="mui-media-body" style="padding-left: 10px; margin-top: 6px; height: 95px; width: 100%;">
                        <h2 id="username">用户名</h2>
                        <p class="mui-ellipsis">微信号: <label id="account"></label></p>
                        <a href="javascript:;" class="status" style="display:flex;align-items: center;justify-content: center;">
							<label style="font-size: 18px;font-weight: 300;padding-right: 2px;padding-bottom: 1px;">+</label>
							状态
						</a>
						<a href="javascript:;" class="status_two" style="display:flex;align-items: center;justify-content: center;margin-left: 60px;">
							<label style="font-size: 13px;font-weight: 400;transform: rotate(160deg);">☋</label>
						</a>
                    </div>
                    <div class="mui-navigate-right"></div>
                </a>
            </div>
        </li>
    </ul>

    <div class="content">
        <ul class="mui-table-view" style="margin-top: 8px;">
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right iconfont icon-chatzhifupingtai-weixin"><label class="text" style="padding: 4px;">服务</label></a>
            </li>
        </ul>
        <ul class="mui-table-view" style="margin-top: 8px; margin-bottom: 8px;">
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right iconfont icon-chatshoucang"><label class="text">收藏</label></a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right iconfont icon-chatpengyouquan"><label class="text">朋友圈</label></a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right iconfont icon-chatbofang"><label class="text">视频号</label></a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right iconfont icon-chatqiabao-copy"><label class="text">卡包</label></a>
            </li>
            <li class="mui-table-view-cell" style="">
                <a class="mui-navigate-right iconfont icon-chatxiaolian"><label class="text">表情</label></a>
            </li>
        </ul>

        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right iconfont icon-chatshezhi" style=""><label class="text">设置</label></a>
            </li>
        </ul>
    </div>

</body>

<style>
    /* 头像 */
    .profile-pic {
        width: 60px;
        height: 60px;
        border-radius: 18%;
        object-fit: cover;
        margin: 0 auto;
        display: block;
    }

    /* 昵称 */
    .mui-media-body h2 {
        margin: 0;
        font-size: 20px;
        color: black;
    }

    /* 微信号 */
    .mui-media-body p {
        margin: 10px 0 0 0;
        color: #666;
    }

    /* 状态 */
    .status {
		position: absolute;
        font-size: 12px;
        display: inline-block;
        width: 50px;
        height: 20px;
		line-height: 20px;
        text-align: center;
        margin-top: 13px;
        color: #8a8a8a;
		border: 1px solid #bdbdbd;
		border-radius: 25px;
    }
    /* 状态2 */
    .status_two {
        font-size: 12px;
        display: inline-block;
        width: 20px;
        height: 20px;
		line-height: 20px;
        text-align: center;
        margin-top: 13px;
        color: #8a8a8a;
		border: 1px solid #bdbdbd;
		border-radius: 25px;
    }
	
	
	.iconfont{
		font-size: 19px;
		line-height: 25px;
	}
	.text{
		display: inline-block;
		font-size: 14px;
		line-height: 20px;
		padding-left: 10px;
		align-items: center;
		margin-bottom: 4px;
	}
</style>

</html>
